<template>
  <div>
    <h1>App:{{ message }}</h1>
    <!-- 
      我们有时候会封装一些组件,我们希望实现父子组件的数据双向绑定
      父子组件的数据双向绑定:子组件的数据由父组件传递进去,子组件内部修改可以传递给父组件
      我们可以在组件上 使用props传递数据 并绑定自定义事件接收数据
     -->
    <Input :value="message" @input="message = $event" />
    <!-- 
      当我们给子组件使用 :value 传递数据,使用@input作为自定义事件
      :value+@input ====> v-model
      结论:v-model可以设置给子组件,实现父子组件的数据双向绑定[封装的子组件内部一定是value的props和input的自定义事件]

     -->
    <Input v-model="message" />
  </div>
</template>

<script>
import Input from "@/components/Input";
export default {
  name: "App",
  components: {
    Input,
  },
  data() {
    return {
      message: "hello",
    };
  },
};
</script>

<style></style>
